<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市区列表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../static/css/element-ui-2.6.14.css">
    <style>
        .el-header{
            color: #333;
            padding: 11px;
            background: white;
            margin: 0 0 5px 0;
        }
        .el-main {
            color: #333;
            padding: 0;
            background:white;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-form :inline="true" :model="provinceCityQueryForm" class="demo-form-inline">
                <el-form-item label="省份">
                    <el-select v-model="provinceCityQueryForm.province" clearable @change="initCityList" placeholder="省份">
                        <el-option
                                v-for="item in provinceList"
                                :key="item.addrCode"
                                :label="item.addrName"
                                :value="item.addrCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="城市">
                    <el-select v-model="provinceCityQueryForm.city" clearable placeholder="城市">
                        <el-option
                                v-for="item in cityList"
                                :key="item.addrCode"
                                :label="item.addrName"
                                :value="item.addrCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!--                    <el-form-item label="区域">-->
                <!--                        <el-select v-model="provinceCityQueryForm.area" clearable placeholder="区域">-->
                <!--                            <el-option-->
                <!--                                v-for="(item,key) in areaList"-->
                <!--                                :key="key"-->
                <!--                                :label="item"-->
                <!--                                :value="key">-->
                <!--                            </el-option>-->
                <!--                        </el-select>-->
                <!--                    </el-form-item>-->
                <el-form-item>
                    <el-button type="primary" @click="initProvinceCityList">查询</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table
                    :data="provinceCityList"
                    border
                    :header-cell-style="getRowClass"
                    style="width:98%;margin:0 10px;">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="addrCode"
                        label="代码"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="addrName"
                        label="名称"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="fatherCode"
                        label="父级代码"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="type"
                        align="center"
                        label="级别"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        align="center"
                        label="创建时间">
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
            </el-pagination>
        </el-main>
    </el-container>
</div>

<script type="text/javascript" src="../static/js/vue.min-2.6.14.js"></script>
<!-- 引入组件库 -->
<script src="../static/js/element-ui-2.15.6.js"></script>
<script src="../static/js/axios.min.js"></script>
<script src="../static/js/app.js"></script>
<script>

    new Vue({
        el: '#app',
        data:{
            provinceList:[],
            cityList: [],
            areaList:[],

            provinceCityList: [],

            provinceCityQueryForm:{
                province: '',
                city: '',
                area: ''
            },

            page:{
                page:1,
                pageSize:10,
                total:0
            },

            auth:{
            }
        },
        created(){
            initAuth(this.auth);
        },
        mounted(){
            this.initProvinceCityList();
            this.initProvinceList();
        },
        methods: {
            initProvinceCityList(){
                axios.post(domain + "resProvinceCity/queryResProvinceCityByPage",{
                    page:this.page.page,
                    pageSize:this.page.pageSize,
                    province: this.provinceCityQueryForm.province,
                    city: this.provinceCityQueryForm.city,
                    area: this.provinceCityQueryForm.area

                }).then(resp=>{
                    const res = resp.data;
                    if (res.status == 200){
                        this.provinceCityList = res.data.rows;
                        this.page.total = res.data.records;
                    }else {
                        notify(resp)
                    }

                });
            },
            handleSizeChange(val){
                if(this.page.pageSize != val){
                    this.page.pageSize = val;
                    this.initProvinceCityList();
                }
            },
            handleCurrentChange(val){
                if(this.page.page != val){
                    this.page.page = val;
                    this.initProvinceCityList();
                }
            },
            getRowClass({ rowIndex }){
                if (rowIndex == 0) {
                    return 'background:RGB(238,239,246)'
                } else {
                    return ''
                }
            },
            initProvinceList(){
                axios.get(domain + "/resProvinceCity/queryAddrByFatherCode",{
                    params:{
                        fatherCode: "0000"
                    }
                }).then(resp=>{
                    const res = resp.data;
                    if (res.status == 200){
                        this.provinceList = res.data;
                    }else {
                        notify(resp)
                    }
                });
            },
            initCityList(){
                this.provinceCityQueryForm.city = null;
                this.cityList = [];
                if (this.provinceCityQueryForm.province != null && this.provinceCityQueryForm.province !== ''){
                    axios.get(domain + "/resProvinceCity/queryAddrByFatherCode",{
                        params:{
                            fatherCode: this.provinceCityQueryForm.province
                        }
                    }).then(resp=>{
                        const res = resp.data;
                        if (res.status == 200){
                            this.cityList = res.data;
                        }else {
                            notify(resp)
                        }
                    });
                }
            },
        }
    });

</script>
</body>
</html>